<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>老人仪表板 - 养老院管理系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link rel="stylesheet" th:href="@{/css/main.css}">
</head>
<body>
<!-- 侧边栏 -->
<div class="sidebar">
    <div class="sidebar-brand">
        <h4 class="text-white">养老院管理系统</h4>
    </div>
    <hr class="sidebar-divider">
    <div class="sidebar-heading">老人菜单</div>
    <ul class="nav flex-column">
        <li class="nav-item">
            <a class="nav-link active" th:href="@{/elderly/dashboard}">
                <i class="fas fa-fw fa-tachometer-alt"></i>
                <span>仪表板</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" th:href="@{/elderly/health-records}">
                <i class="fas fa-fw fa-heartbeat"></i>
                <span>健康记录</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" th:href="@{/elderly/medications}">
                <i class="fas fa-fw fa-pills"></i>
                <span>我的药物</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" th:href="@{/elderly/profile}">
                <i class="fas fa-fw fa-user"></i>
                <span>个人资料</span>
            </a>
        </li>
    </ul>
    <hr class="sidebar-divider">
    <div class="sidebar-heading">账户</div>
    <ul class="nav flex-column">
        <li class="nav-item">
            <a class="nav-link" th:href="@{/logout}">
                <i class="fas fa-fw fa-sign-out-alt"></i>
                <span>退出登录</span>
            </a>
        </li>
    </ul>
</div>

<!-- 内容区域 -->
<div class="content">
    <!-- 顶部导航栏 -->
    <nav class="navbar navbar-expand navbar-light bg-white mb-4 shadow">
        <button id="sidebarToggle" class="btn btn-link d-md-none rounded-circle mr-3">
            <i class="fas fa-bars"></i>
        </button>
        <h5 class="mb-0">老人仪表板</h5>
        <ul class="navbar-nav ml-auto">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="mr-2 d-none d-lg-inline text-gray-600 small" th:text="${#authentication.name}">王老先生</span>
                    <i class="fas fa-user-circle fa-fw"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-right shadow" aria-labelledby="userDropdown">
                    <a class="dropdown-item" th:href="@{/elderly/profile}">
                        <i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
                        个人资料
                    </a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" th:href="@{/logout}">
                        <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
                        退出登录
                    </a>
                </div>
            </li>
        </ul>
    </nav>

    <!-- 页面内容 -->
    <div class="container-fluid">
        <!-- 欢迎信息 -->
        <div class="d-sm-flex align-items-center justify-content-between mb-4">
            <h1 class="h3 mb-0 text-gray-800">欢迎，<span th:text="${elderly.name}">王老先生</span>！</h1>
            <a href="#" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm">
                <i class="fas fa-download fa-sm text-white-50"></i> 下载健康报告
            </a>
        </div>

        <!-- 健康状态卡片 -->
        <div class="row">
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card dashboard-card primary shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">健康状况</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800" th:text="${elderly.healthStatus}">良好</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-heart fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card dashboard-card success shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-success text-uppercase mb-1">最近血压</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800" th:text="${lastBloodPressure}">120/80</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-heartbeat fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card dashboard-card warning shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">今日药物</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800" th:text="${todayMedicationsCount}">3</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-pills fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card dashboard-card danger shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-danger text-uppercase mb-1">下次体检</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800" th:text="${nextCheckupDate}">2023-07-15</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-calendar fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 今日药物和健康记录 -->
        <div class="row">
            <!-- 今日药物 -->
            <div class="col-lg-6">
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">今日药物</h6>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered" id="todayMedicationsTable" width="100%" cellspacing="0">
                                <thead>
                                <tr>
                                    <th>药物名称</th>
                                    <th>服用时间</th>
                                    <th>剂量</th>
                                    <th>状态</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr th:each="medication : ${todayMedications}">
                                    <td th:text="${medication.name}">降压药</td>
                                    <td th:text="${#dates.format(medication.scheduledTime, 'HH:mm')}">08:00</td>
                                    <td th:text="${medication.dosage}">1片</td>
                                    <td>
                                                <span th:class="${medication.administered ? 'badge badge-success' : 'badge badge-warning'}"
                                                      th:text="${medication.administered ? '已服用' : '待服用'}">待服用</span>
                                    </td>
                                </tr>
                                <!-- 示例数据 -->
                                <tr>
                                    <td>降压药</td>
                                    <td>08:00</td>
                                    <td>1片</td>
                                    <td><span class="badge badge-success">已服用</span></td>
                                </tr>
                                <tr>
                                    <td>钙片</td>
                                    <td>12:00</td>
                                    <td>1片</td>
                                    <td><span class="badge badge-warning">待服用</span></td>
                                </tr>
                                <tr>
                                    <td>安眠药</td>
                                    <td>21:00</td>
                                    <td>1片</td>
                                    <td><span class="badge badge-warning">待服用</span></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 最近健康记录 -->
            <div class="col-lg-6">
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">最近健康记录</h6>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered" id="recentHealthRecordsTable" width="100%" cellspacing="0">
                                <thead>
                                <tr>
                                    <th>日期</th>
                                    <th>记录类型</th>
                                    <th>数值</th>
                                    <th>记录人</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr th:each="record : ${recentHealthRecords}">
                                    <td th:text="${#dates.format(record.recordDate, 'yyyy-MM-dd')}">2023-06-14</td>
                                    <td th:text="${record.type}">血压</td>
                                    <td th:text="${record.value}">120/80</td>
                                    <td th:text="${record.recordedBy}">张医生</td>
                                </tr>
                                <!-- 示例数据 -->
                                <tr>
                                    <td>2023-06-14</td>
                                    <td>血压</td>
                                    <td>120/80</td>
                                    <td>张医生</td>
                                </tr>
                                <tr>
                                    <td>2023-06-13</td>
                                    <td>体温</td>
                                    <td>36.5°C</td>
                                    <td>李护士</td>
                                </tr>
                                <tr>
                                    <td>2023-06-12</td>
                                    <td>血糖</td>
                                    <td>5.6 mmol/L</td>
                                    <td>王医生</td>
                                </tr>
                                <tr>
                                    <td>2023-06-11</td>
                                    <td>体重</td>
                                    <td>65 kg</td>
                                    <td>赵护士</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="text-center mt-3">
                            <a th:href="@{/elderly/health-records}" class="btn btn-primary">查看所有健康记录</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 健康趋势图 -->
        <div class="row">
            <div class="col-12">
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">健康趋势</h6>
                    </div>
                    <div class="card-body">
                        <div class="chart-area">
                            <canvas id="healthTrendChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 通知和公告 -->
        <div class="row">
            <div class="col-12">
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">通知和公告</h6>
                    </div>
                    <div class="card-body">
                        <div class="list-group">
                            <a href="#" class="list-group-item list-group-item-action">
                                <div class="d-flex w-100 justify-content-between">
                                    <h5 class="mb-1">养老院活动通知</h5>
                                    <small>3天前</small>
                                </div>
                                <p class="mb-1">本周六上午10点将举行太极拳活动，欢迎大家参加。</p>
                            </a>
                            <a href="#" class="list-group-item list-group-item-action">
                                <div class="d-flex w-100 justify-content-between">
                                    <h5 class="mb-1">体检通知</h5>
                                    <small>1周前</small>
                                </div>
                                <p class="mb-1">下月初将安排全院老人进行体检，具体时间另行通知。</p>
                            </a>
                            <a href="#" class="list-group-item list-group-item-action">
                                <div class="d-flex w-100 justify-content-between">
                                    <h5 class="mb-1">餐厅菜单更新</h5>
                                    <small>2周前</small>
                                </div>
                                <p class="mb-1">养老院餐厅菜单已更新，增加了多种适合老年人的健康食品。</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
<script th:src="@{/js/main.js}"></script>
<script>
    // 健康趋势图表
    var ctx = document.getElementById('healthTrendChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['6月1日', '6月3日', '6月5日', '6月7日', '6月9日', '6月11日', '6月13日'],
            datasets: [
                {
                    label: '收缩压',
                    data: [125, 122, 128, 130, 125, 123, 120],
                    backgroundColor: 'rgba(78, 115, 223, 0.05)',
                    borderColor: 'rgba(78, 115, 223, 1)',
                    pointRadius: 3,
                    pointBackgroundColor: 'rgba(78, 115, 223, 1)',
                    pointBorderColor: 'rgba(78, 115, 223, 1)',
                    pointHoverRadius: 5,
                    pointHoverBackgroundColor: 'rgba(78, 115, 223, 1)',
                    pointHoverBorderColor: 'rgba(78, 115, 223, 1)',
                    pointHitRadius: 10,
                    pointBorderWidth: 2,
                    tension: 0.3
                },
                {
                    label: '舒张压',
                    data: [85, 82, 84, 87, 83, 81, 80],
                    backgroundColor: 'rgba(28, 200, 138, 0.05)',
                    borderColor: 'rgba(28, 200, 138, 1)',
                    pointRadius: 3,
                    pointBackgroundColor: 'rgba(28, 200, 138, 1)',
                    pointBorderColor: 'rgba(28, 200, 138, 1)',
                    pointHoverRadius: 5,
                    pointHoverBackgroundColor: 'rgba(28, 200, 138, 1)',
                    pointHoverBorderColor: 'rgba(28, 200, 138, 1)',
                    pointHitRadius: 10,
                    pointBorderWidth: 2,
                    tension: 0.3
                }
            ]
        },
        options: {
            maintainAspectRatio: false,
            layout: {
                padding: {
                    left: 10,
                    right: 25,
                    top: 25,
                    bottom: 0
                }
            },
            scales: {
                xAxes: [{
                    gridLines: {
                        display: false,
                        drawBorder: false
                    },
                    ticks: {
                        maxTicksLimit: 7
                    }
                }],
                yAxes: [{
                    ticks: {
                        maxTicksLimit: 5,
                        padding: 10,
                        beginAtZero: false
                    },
                    gridLines: {
                        color: "rgb(234, 236, 244)",
                        zeroLineColor: "rgb(234, 236, 244)",
                        drawBorder: false,
                        borderDash: [2],
                        zeroLineBorderDash: [2]
                    }
                }]
            },
            legend: {
                display: true,
                position: 'top'
            },
            tooltips: {
                backgroundColor: "rgb(255,255,255)",
                bodyFontColor: "#858796",
                titleMarginBottom: 10,
                titleFontColor: '#6e707e',
                titleFontSize: 14,
                borderColor: '#dddfeb',
                borderWidth: 1,
                xPadding: 15,
                yPadding: 15,
                displayColors: false,
                intersect: false,
                mode: 'index',
                caretPadding: 10
            }
        }
    });
</script>
</body>
</html>